<template>
  <div>
    <el-container>
      <el-header style="background: linear-gradient(to right, #3498db, #9b59b6); padding: 0; height: auto;">
        <r-header></r-header>
      </el-header>
      <el-container>
    <el-aside :width="isCollapse ? '4rem' : '12.5rem'"  class="left-aside">
        <TeacherNav style="height: 780px;" v-on:childByValue="childByValue"></TeacherNav>
      </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import TeacherNav from "@/components/TeacherNav";
import RHeader from "@/components/r-header";
export default {
  name: "index",
  components: {RHeader, TeacherNav},
  data () {
      return {
        isCollapse: 'false'
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.isCollapse = childValue
      }
    }
}
</script>

<style scoped>
 .el-main{background-color: blue;}
 .left-aside{
		overflow: visible;
    transition: width 0.4s;
	}
</style>